<template>
    <div class="goods-list">
        <div class="goods-item" v-for="item in goodslist" :key="item.proid">
            <img :src="item.img1" alt="">
            <p class="name">{{item.proname}}</p>
            <p class="price">
                ¥<span class="price-value">
                    {{item.originprice}}
                </span>
            </p>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
defineProps<{
    goodslist: {
        proid: string,
        proname: string,
        img1: string,
        originprice: number,
        [propName: string]: any
    }[]
}>()
</script>

<style scoped lang='scss'>
.goods-list {
    margin: 10px;

    .goods-item {
        font-size: 0.8em;
        box-sizing: border-box;
        padding: 5px;
        width: 50%;
        display: inline-block;

        img {
            width: 80%;
            margin: 5px auto;
        }

        .name {
            color: #333;
            height: 3em;
            line-height: 1.5em;
            overflow: hidden;
        }

        .price {
            color: red;
            font-weight: 900;
        }
    }
}
</style>
